
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>图片放大缩小</title>
<style type="text/css">
	*{margin:0px;padding:0px;}
	#oDiv{width:250px;height:300px;border:1px solid red;margin:20px auto;}
	#oDiv > div.bigImgBox,#oDiv > ul.listImgBox{width:100%;}
	.bigImgBox{height:239px;background: rebeccapurple;border-bottom:1px solid green;position:relative;}
	.bigImgBox img{width:100%;height:100%;top:-239;position:absolute;opacity:0;filter:alpha(opacity=0);}
	.bigImgBox img.active{opacity:1;filter:alpha(opacity=100);top:0;}
	.listImgBox{height:60px;background:lightblue;list-style:none;}
	.listImgBox li{width:61px;border-right:1px solid red;float:left;height:60px;}
	.listImgBox li img{width:100%;height:100%;}
</style>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/move.js"></script>
<script type="text/javascript">
	$(function(){
		$(".listImgBox li").each(function(){
			var myIndex=$(this).index();
			$(this).mouseover(function(){
				var $obj = $(".bigImgBox img.active");
				var obj = $obj[0];
				var $nextObj = $(".bigImgBox img").eq(myIndex);
				var nextObj = $nextObj[0];
				
				startMove(obj,{opacity:0,top:-239});
				$obj.removeClass("active");
				
				startMove(nextObj,{opacity:100,top:0});
				$nextObj.addClass("active");
			})
			
		})
	})
</script>
</head>
<body>
	<div id="oDiv">
		<div class="bigImgBox">
			<img class="active" src="images/60x60_1.png" />
			<img src="images/60x60_2.png" />
			<img src="images/60x60_3.png" />
			<img src="images/60x60_4.png" />
		</div>
		<ul class="listImgBox">
			<li><a href="javascript:;"><img src="images/60x60_1.png" /></a></li>
			<li><a href="javascript:;"><img src="images/60x60_2.png" /></a></li>
			<li><a href="javascript:;"><img src="images/60x60_3.png" /></a></li>
			<li style="width:64px;border:none;"><a href="javascript:;"><img src="images/60x60_4.png" /></a></li>
		</ul>
	</div>
</body>
</html>